<template>
  <div id="container">
    <div id="_top">查询</div>
    <div id="_bottom">
      <div>
        <span>搜索</span>
        <el-input
          type="input"
          placeholder="请输入内容"
          v-model.trim="name"
          size="small"
          style="width: 20rem; margin-right: 3rem"
        >
        </el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="searchCoupon"
          >搜索</el-button
        >
      </div>
      <div>
        <span>筛选</span>
        <el-select
          v-model="couponType"
          placeholder="选择优惠券类型"
          size="small"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-date-picker
          type="date"
          placeholder="选择日期"
          v-model="stime"
          size="small"
          style="width: 10%; margin-left: 1rem"
        ></el-date-picker>
        <span>-</span>
        <el-date-picker
          type="date"
          placeholder="选择日期"
          v-model="etime"
          size="small"
          style="width: 10%"
        ></el-date-picker>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      couponType: "",
      value: "",
      stime: "",
      etime: "",
      count: 0,
      options: [
        {
          value: "满减券",
          label: "满减券",
        },
        {
          value: "折扣券",
          label: "折扣券",
        },
        {
          value: "品类券",
          label: "品类券",
        },
      ],
    };
  },
  methods: {
    // 查询功能
    async searchCoupon() {
      const { data: res } = await this.axios.post("/coupon/list", {
        name: this.name,
        couponType: this.couponType,
        stime: this.stime,
        etime: this.etime,
      });
      // 遍历数组修改数据
      res.data.forEach((item) => {
        // 将时间戳转换为本地时间
        let startTime = this.timeTransfer(item.startTime);
        let endTime = this.timeTransfer(item.endTime);
        item.startTime = startTime;
        item.endTime = endTime;
        item.validTime = startTime + "-" + endTime;
        // 修改生效状态
        if (item.effectiveStatus == 0) item.effectiveStatus = "未开始";
        else if (item.effectiveStatus == 1) item.effectiveStatus = "未过期";
        else if (item.effectiveStatus == 2) item.effectiveStatus = "已过期";
        // 修改发布状态
        if (item.releaseStatus == 0) item.releaseStatus = "未发布";
        else if (item.releaseStatus == 1) item.releaseStatus = "已发布";
      });
      console.log(res);
      this.$emit("searchData", res);
    },

    // 时间戳转换为当地时间的方法
    timeTransfer(timestamp) {
      let time = new Date(timestamp);
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let date = time.getDate();
      let hours = time.getHours();
      let minute = time.getMinutes();

      if (month < 10) {
        month = "0" + month;
      }
      if (date < 10) {
        date = "0" + date;
      }
      if (hours < 10) {
        hours = "0" + hours;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }

      return year + "-" + month + "-" + date + " " + hours + ":" + minute;
    },
  },
};
</script>

<style lang="less" scoped>
#container {
  font-size: 2rem;
  border: 2px solid lightgray;
  margin: 0 auto;
  box-sizing: border-box;
}

#_top {
  height: 2.5rem;
  line-height: 2.5rem;
  background-color: lightgray;
  // border: 1px solid black;
  padding: 1.5rem;
}

#_bottom {
  background-color: #fff;
  font-size: 1.5rem;
  line-height: 5rem;
  padding: 2.5rem;
  height: 10rem;
  & span {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
</style>